<template>
  <div class="email-container">

    <div class="item-top">
      <div class="title mt-16" ref="title">ACMS Reports</div>
      <div class="filter-btns">
        <a-radio-group :value="notificationService.acmsAction" @change="change">
          <a-radio value="AND">AND</a-radio>
          <a-radio value="OR">OR</a-radio>
        </a-radio-group>
      </div>

    </div>

    <div class="sub-title">可选</div>
    <a-transfer :rowKey="record => record.id" :data-source="AcmsList" :titles="['', '']"
      :render="item => item.templateName" :target-keys="targetKeys" :selected-keys="selectedKeys" :list-style="{
        width: '50%',
        height: '180px',
      }" @change="handleChange" @selectChange="handleSelectChange" @scroll="handleScroll" />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {
  data() {
    return {
      targetKeys: [],
      selectedKeys: []
    };
  },
  computed: {
    ...mapState('emailNotification', ['notificationService', 'AcmsList'])
  },
  props:{
    title: String
  },
  watch:{
    AcmsList:{
      deep:true,
      handler(n){
        console.log("**1",n[0]);
      }
    }
  },
  mounted() {
    const emailRow = JSON.parse(localStorage.getItem('emailRow') ?? '{}');
    console.log("--------------------------", this.AcmsList);
    if (Object.values(emailRow)?.length > 0) {

      this.targetKeys = emailRow.acmsList;
    }
  },
  methods: {
    getTitle() {
      return this.$refs.title.innerHTML
    },
    ...mapMutations('emailNotification', ['setState']),
    change(e) {
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, acmsAction: e.target.value } });
    },
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys;
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, acmsList: nextTargetKeys } });
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
    },
    handleScroll() {

    }
  }
};
</script>
<style lang="less" scoped>
.container {
  margin: 20px 0;

  h4 {
    text-align: left;
    padding-left: 30px;
  }

  .filter-btns {
    display: flex;
    justify-content: flex-start;
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
</style>
